<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <style>
        body {
            font-size: 24px;
        }
    
        #loginPanal {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 400px;
            height: 260px;
            margin: -130px 0 0 -200px;
            border: 1px solid;
        }
    
        .inputPanal {
            margin: 10px;
            width: 360px;
            height: 48px;
        }
    
        button {
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            padding: 6px 6px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }
    </style>
</head>


<body>
    <div id="loginPanal">
        <div class="inputPanal"><label for="email" style="width: 10%;;">邮 箱 <input id="email" type="text"
                    style="width: 80%;"></label></div>
        <div class="inputPanal"><label for="passwd" style="width: 10%">密 码 <input id="passwd" type="password"
                    style="width: 80%;"></label></div>
        <div class="inputPanal"><button id="loginBtn" style="width: 100%;">登 录</button></div>
        <div class="inputPanal" style="text-align: center;"><a href="./register.html">注册新账号</a></div>
    </div>

    <script>
        $(function () {

            function login(email, passwd) {
                $.ajax({
                    url: "/api/user/login/" + email + "/" + passwd,
                    // data: {"email": email, "password": passwd},
                    contentType: "application/json",
                    // dataType: "json",
                    method: "GET",
                    success: (data) => {
                        if(data == email) {
                            window.location.href = "./welcome.html?" + "email=" + email 
                        } else {
                            alert("用户名或密码错误")
                        }
                    }
                })
            }

            $("#loginBtn").on('click', () => {
                var email = $("#email").val();
                var passwd = $("#passwd").val();
                if (email === "") {
                    alert("email is empty")
                } else if (passwd === "") {
                    alert("password is empyt")
                } else {
                    login(email, passwd);
                }
            })
        })
    </script>
</body>

</html>